<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代理对象</title>
	</head>
	<body>
		<div id="app">
			<a>
				<p></p>
				<div @click="test">按钮</div>
				<button @click="testArray">测试数组监听</button>
				<button @click="testadd">测试添加</button>
				<button @click="testObject">测试对象监听</button>
				<button @click="getObject">获取对象的值</button>
				<button @click="testIsShow">监听v-if</button>
				
				<input v-model="name" >
				<input v-model="num" >
				<input v-model="form.name" >
				<br>
				<br>
				{{ form.obj.name }}
				<br>
				
				<a>{{ form.name }} :: {{num}} ::: {{ form.obj.name }}</a>
				
				<div v-for="value in myArray2">
					<div @click="test" >{{value.test.name}}::  {{value.name}}    :: {{name}} 点击会有惊喜<a> {{name}}
					</a> </div>
					<input v-model="name"/>
				</div>
				
				<hr>
				
				<div v-for="value in myArray">
					<div @click="test" >
						{{value}}    :: {{name}} 点击会有惊喜<a> {{name}}</a> 	
					</div>
					<input v-model="name"/>
					<div v-for="val in myArray">
						<a>{{ val }}</a>
					</div>
				</div>
				
			</a>
		</div>
		<script src="js/xiong.js"></script>
		<script>
			var v={
				data(){
					return {
						 isshow:true,
						 index:0,
						 name:'名字初始值',
						 num:11,
						 myArray : ['Item 1', 'Item 2', 'Item 3'],
						 myArray2 : [{name:'Item 1',test:{name:"1"}}, {name:'Item 2',test:{name:"2"}}, {name:'Item 3',test:{name:"3"}}],
						 form:{
							 name:'123',
							 obj:{
								 name:'哈哈',
								 isshow:false,
							 },
							 isshow:true
						 }
					}
				},
				created(){
					this.testName();
				},
				method:{
					testName(){
						console.log('初始化')
					},
					testadd(){
						this.index++;
						this.myArray2.push({name:'Item '+this.index,test:{name:this.index}});
					},
					getName(){
						return 'haha';
					},
					test(){
						this.num++;
					},
					testIsShow(){
						if(this.isshow){
							this.isshow=false;
						}else{
							this.isshow=true;
						}
					},
					testArray(){
						this.index++;
						this.myArray2.splice(1,1);
					//	this.myArray2[this.index]={name:'被修改了',test:{name:'被修改了'}};
					//	
					},
					testObject(){
						//this.form['name']='456'
					},
					getObject(){
						app.setData('name','哈哈哈')
						let name=app.getData('form.name')
					}
				}
			}
			app.importData(v);
			app.init('app');
				
			app.setData('name','X.I.O')
			
		</script>
	
	</body>
</html>